<script setup lang="ts">
interface SkeletonProps {
  avatar?: boolean;
  avatarSize?: 'small' | 'medium' | 'large';
  title?: boolean;
  titleWidth?: string;
  paragraph?: number;
  paragraphWidth?: string | string[];
}

const props = withDefaults(defineProps<SkeletonProps>(), {
  avatar: false,
  avatarSize: 'medium',
  title: true,
  titleWidth: '60%',
  paragraph: 3,
  paragraphWidth: '100%'
});

function getParagraphWidth(index: number): string {
  if (Array.isArray(props.paragraphWidth)) {
    return props.paragraphWidth[index - 1] || '100%';
  }

  // 最后一行随机宽度
  if (index === props.paragraph) {
    return ['60%', '70%', '80%'][Math.floor(Math.random() * 3)];
  }

  return props.paragraphWidth;
}
</script>

<template>
  <div class="skeleton">
    <!-- 基础骨架元素 -->
    <div v-if="avatar" class="skeleton-avatar" :class="[`skeleton-avatar-${avatarSize}`]"></div>

    <div v-if="title" class="skeleton-title" :style="{ width: titleWidth }"></div>

    <div v-for="i in paragraph" :key="i" class="skeleton-paragraph" :style="{ width: getParagraphWidth(i) }"></div>

    <!-- 自定义内容插槽 -->
    <slot></slot>
  </div>
</template>

<style scoped>
.skeleton {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-avatar {
  background-color: #e5e7eb;
  border-radius: 50%;
  margin-bottom: 12px;
}

.skeleton-avatar-small {
  width: 32px;
  height: 32px;
}

.skeleton-avatar-medium {
  width: 48px;
  height: 48px;
}

.skeleton-avatar-large {
  width: 64px;
  height: 64px;
}

.skeleton-title {
  height: 16px;
  background-color: #e5e7eb;
  border-radius: 4px;
  margin-bottom: 12px;
}

.skeleton-paragraph {
  height: 12px;
  background-color: #e5e7eb;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-paragraph:last-child {
  margin-bottom: 0;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
</style>
